<template>
  <s-layout
    @loginEnd="loginEnd"
    navbar="custom1"
    :bgStyle="{
	 color: '#F8F8F8'
	}"
    onShareAppMessage
  >
    <view class="form-box">
      <uni-forms
        ref="form"
        :modelValue="state.form"
        :rules="rules"
        label-width="160"
      >
        <view class="header-title">商户信息</view>
        <view class="bg-white">
          <view class="formItem-box">
            <uni-forms-item
              label="商户名称"
              name="merchant_name"
            >
              <view class="form-box-input-item">
                <input
                  :disabled="true"
                  type="text"
                  v-model="state.form.merchant_name"
                  placeholder="请输入商户名称"
                  @input="setValue($event,'merchant_name')"
                />
              </view>
            </uni-forms-item>
            <uni-forms-item
              label="社会信用代码"
              name="social_credit_code"
            >
              <view class="form-box-input-item">
                <input
                  :disabled="true"
                  type="text"
                  v-model="state.form.social_credit_code"
                  placeholder="请输入社会信用代码"
                  @input="setValue($event,'merchant_name')"
                />
              </view>
            </uni-forms-item>
          </view>
        </view>
        <view class="header-title">商户资料</view>
        <view
          v-if="!state.seeAccount"
          class="bg-white"
        >
          <view class="formItem-box">
            <uni-forms-item name="cashierDeskPic">
              <view class="bot-solid">
                <view class="img-title"><span class="color-style">*</span>收银台图片</view>
                <view class="ss-flex justify-between">
                  <s-uploader
                    :delIcon="!state.disabled"
                    fileMediatype="image"
                    v-model:url="state.form.cashierDeskPic"
                    :limit="1"
                    :sizeType="['original']"
                    :listStyles="{border:false}"
                    :imageStyles="{ width: '400rpx',height:'350rpx'}"
                    :isZip="true"
                  >
                    <image
                      style=" width: 400rpx;border-radius:20rpx"
                      src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/default/20250422/aecb39d4cacbd0f9eb729ae892cf9143.png"
                      mode="widthFix"
                    />
                  </s-uploader>
                </view>
              </view>
            </uni-forms-item>
            <uni-forms-item name="doorPic">
              <view class="bot-solid">
                <view class="img-title"><span class="color-style">*</span>门头照</view>
                <view class="ss-flex justify-between">
                  <s-uploader
                    :delIcon="!state.disabled"
                    fileMediatype="image"
                    v-model:url="state.form.doorPic"
                    :limit="1"
                    :sizeType="['original']"
                    :listStyles="{border:false}"
                    :imageStyles="{ width: '400rpx',height:'350rpx'}"
                    :isZip="true"
                  >
                    <image
                      style=" width: 400rpx;border-radius:20rpx"
                      src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/default/20250422/f2a3dabbc5b7b4a609b0c06742f83a3a.png"
                      mode="widthFix"
                    />
                  </s-uploader>
                </view>
              </view>
            </uni-forms-item>
            <uni-forms-item name="insidePic">
              <view class="bot-solid">
                <view class="img-title"><span class="color-style">*</span>经营环境图片</view>
                <view class="ss-flex justify-between">
                  <s-uploader
                    :delIcon="!state.disabled"
                    fileMediatype="image"
                    v-model:url="state.form.insidePic"
                    :limit="1"
                    :sizeType="['original']"
                    :listStyles="{border:false}"
                    :imageStyles="{ width: '400rpx',height:'350rpx'}"
                    :isZip="true"
                  >
                    <image
                      style=" width: 400rpx;border-radius:20rpx"
                      src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/default/20250422/e1e26270bb089cb73f24680d15fc97ac.png"
                      mode="widthFix"
                    />
                  </s-uploader>
                </view>
              </view>
            </uni-forms-item>
          </view>
        </view>
      </uni-forms>
    </view>
    <view class="bottom-box ss-safe-bottom">
      <view class="ss-p-y-20 ss-flex justify-center">
        <view
          class="btn-box"
          :disabled="true"
          @click="submit"
        >提交</view>
      </view>
    </view>
  </s-layout>
</template>

<script setup>
import { ref, computed, reactive, watch, nextTick } from 'vue';
import { onLoad, onShow, onUnload } from '@dcloudio/uni-app';
import sheep from '@/sheep';
	import commissionAPI from "@/ygb/api/commission"
import { clone } from 'lodash'
const rules = {
  // 收银台
  cashierDeskPic: {
    rules: [{
      validateFunction: (rule, value, data, callback) => {
        // 异步需要返回 Promise 对象
        return new Promise((resolve, reject) => {
          if (state.form.cashierDeskPic) {
            resolve()
          } else {
            reject(new Error('请上传收银台照片'))
          }
        })
      }
    }]
  },
  // 门头照
  doorPic: {
    rules: [{
      validateFunction: (rule, value, data, callback) => {
        // 异步需要返回 Promise 对象
        return new Promise((resolve, reject) => {
          if (state.form.doorPic) {
            resolve()
          } else {
            reject(new Error('请上传门头照'))
          }
        })
      }
    }]
  },
  // 经营环境
  insidePic: {
    rules: [{
      validateFunction: (rule, value, data, callback) => {
        // 异步需要返回 Promise 对象
        return new Promise((resolve, reject) => {
          if (state.form.insidePic) {
            resolve()
          } else {
            reject(new Error('请上传经营环境照片'))
          }
        })
      }
    }]
  },
}
const form = ref(null);
const loginEnd = () => {
  console.log(11);
}
const submit = () => {
  const formSubmit = clone(state.form)
  form.value.validate().then(async formVal => {
    uni.showLoading({
      title: '正在提交...'
    })
    commissionAPI.merchant.setBasicInformation(formSubmit).then((res) => {
      const { error, data } = res;
      uni.hideLoading();
      if (error == 0) {
        uni.showToast({
          title: '提交成功',
          mask: false,
          duration: 1000
        });
        setTimeout(() => {
          uni.navigateBack({ delta: 1 });
        }, 1000)
      } else {
        uni.showToast({
          title: res.msg,
          icon: 'none',
          duration: 3000
        })
      }
    })
  })
}
const state = reactive({
  form: {
    id: '',//商户id
    merchant_name: '',//商户名称
    social_credit_code: '',//社会信用代码
    cashierDeskPic: '',//收银台图片
    doorPic: '',//门头照
    insidePic: '',//经营环境图片
    type: '',//类型
  },
  disabled: false
});
onLoad(async (option) => {
  const { id, is_bd, type } = option;
  state.form.id = id
  state.form.type = type
  getDetail(option.id, option.is_bd, option.type)

});
const getDetail = (id, is_db, type) => {
  commissionAPI.merchant.applyDetailTest(id, { type, is_bd: is_db }).then((res) => {
    const { error, data } = res;
    if (error == 0) {
      const { id, merchant_name, social_credit_code, cashierDeskPic, doorPic, insidePic } = data;
      state.form.id = id
      state.form.merchant_name = merchant_name
      state.form.social_credit_code = social_credit_code
      state.form.cashierDeskPic = cashierDeskPic
      state.form.doorPic = doorPic
      state.form.insidePic = insidePic
    }
  });


}
</script>

<style lang="scss" scoped>
.bottom-box {
  width: 100%;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 10;
  background-color: #fff;

  .btn-box {
    width: 686rpx;
    height: 88rpx;
    background: #1677fe;
    border-radius: 44rpx;
    font-weight: 500;
    font-size: 28rpx;
    color: #ffffff;
    line-height: 88rpx;
    text-align: center;
    position: relative;
  }

  .btn-withdraw {
    width: 686rpx;
    height: 88rpx;
    background: #dddddd;
    border-radius: 44rpx;
    font-weight: 500;
    font-size: 28rpx;
    color: #000000;
    line-height: 88rpx;
    text-align: center;
  }
}
.color-style {
  color: #dd524d;
}
.img-title {
  font-size: 28rpx;
  padding-bottom: 14rpx;
}
.bot-solid {
  padding-bottom: 20rpx;
}
.form-box {
  width: 100%;
  border-radius: 24rpx 24rpx 0 0;
  background: #f8f8f8;
  padding-bottom: 140rpx;
  position: relative;
}
.header-title {
  font-size: 32rpx;
  color: #323232;
  text-align: left;
  font-style: normal;
  padding: 24rpx 26rpx;
}
.formItem-box {
  padding: 0 30rpx;
  background-color: #ffffff;
  .form-box-input-item {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    input {
      padding-top: 12rpx;
      font-size: 30rpx;
      text-align: right;
    }
  }
}
::v-deep .uni-forms-item__inner {
  padding-bottom: 0;
  padding-top: 20rpx;
  border-bottom: 1rpx solid #f5f5f5;
}
::v-deep {
  // .radio__inner{
  // 	border-color: #ffdfc7!important;
  // }
  // .radio__inner-icon{
  // 	border-color: #ffdfc7!important;
  // 	background-color:var(--ui-BG-5)!important;
  // }
  .file-picker__box-content {
    border: none !important;
  }

  .uni-forms-item__inner {
    padding-bottom: 20rpx;
  }

  .uni-error-message {
    height: 20rpx;
    display: flex;
  }

  .uni-error-message-text {
    font-size: 20rpx;
    line-height: 1;
  }
}
.form-box-input-item-left {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
::v-deep .uni-forms-item__label {
  width: max-content !important;
  .label-text {
    font-size: 30rpx;
  }
}
</style>